<template>
  <div class="machine">
    <infoText ref="infoText"></infoText>
    <div>
      <img src="./img1/top.png" style="width: 100%;" alt="" />
      <div class="machine0">
        <div class="machine1">
          <div class="machine11">
            <div :style="itemStyle1">
              <div class="machine12" v-for="(i, index) in list1" :key="index">{{ i }}</div>
            </div>
          </div>
          <div class="machine11">
            <div :style="itemStyle2">
              <div class="machine12" v-for="(i, index) in list2" :key="index">{{ i }}</div>
            </div>
          </div>
          <div class="machine11">
            <div :style="itemStyle3">
              <div class="machine12" v-for="(i, index) in list3" :key="index">{{ i }}</div>
            </div>
          </div>
        </div>
        <div class="machineBtn" @click="startGame(5, 2, 10)">开始</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list1: [],
      list2: [],
      list3: [],
      timer1: null,
      timer2: null,
      timer3: null,
      itemStyle1: '',
      itemStyle2: '',
      itemStyle3: '',
      door1: true,
    }
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '幸运数字机',
    })
    for (let i = 0; i < 10; i++) {
      this.list1.push(i)
      this.list2.push(i)
      this.list3.push(i)
    }
    this.list1.push(0)
    this.list2.push(0)
    this.list3.push(0)
  },
  methods: {
    startGame(a1, a2, a3) {
      if (!this.door1) return
      if (this.door1) {
        this.door1 = false
      }
      let hh = uni.upx2px(180) * 10
      let num1 = hh + hh * 6 + uni.upx2px(180) * a1
      let num2 = hh + hh * 6 + uni.upx2px(180) * a2
      let num3 = hh + hh * 6 + uni.upx2px(180) * a3

      this.animate(num1, 0, 6000, (val) => {
        this.itemStyle1 = `transform: translateY(-${val % hh}px)`
      })
      if (this.timer1) clearTimeout(this.timer1)
      this.timer1 = setTimeout(() => {
        this.animate(num2, 0, 6000, (val) => {
          this.itemStyle2 = `transform: translateY(-${val % hh}px)`
        })
      }, 1000)
      if (this.timer2) clearTimeout(this.timer2)
      this.timer2 = setTimeout(() => {
        this.animate(num3, 0, 6000, (val, cb) => {
          if (cb) {
            this.door1 = true
            this.$refs.infoText.show()
          }
          this.itemStyle3 = `transform: translateY(-${val % hh}px)`
        })
      }, 2000)
    },
    animate(to, start, duration = 500, fn) {
      const increment = 20
      let currentTime = 0
      let change = to - start

      function easeInOutQuad(t, b, c, d) {
        t /= d / 2
        if (t < 1) {
          return (c / 2) * t * t + b
        }
        t--
        return (-c / 2) * (t * (t - 2) - 1) + b
      }

      function loop() {
        currentTime += increment
        let val = easeInOutQuad(currentTime, start, change, duration)
        fn(val)
        if (currentTime < duration) {
          requestAnimationFrame(loop)
        } else {
          fn(val, 'end')
        }
      }
      loop()
    },
  },
}
</script>

<style lang="scss">
.machine {
  min-height: 100vh;
  width: 100vw;
  background: url('./img1/bg1.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 50rpx;
}
.machine0 {
  background: url('./img1/bg.png') no-repeat;
  background-size: 100% 100%;
  width: 750rpx;
  height: 750rpx;
  position: relative;
}
.machine1 {
  position: absolute;
  top: 236rpx;
  left: 230rpx;
  display: flex;
  width: 350rpx;
}
.machine11 {
  width: 33%;
  height: 180rpx;
  text-align: center;
  overflow: hidden;
  border-right: 1px solid #f60;
}
.machine11:last-child {
  border: 0;
}
.machine12 {
  width: 100%;
  height: 180rpx;
  line-height: 180rpx;
  font-size: 60rpx;
}
.machineBtn {
  position: absolute;
  top: 474rpx;
  left: 232rpx;
  width: 342rpx;
  height: 90rpx;
  color: #fff;
  padding-top: 8rpx;
  text-align: center;
}
</style>
